<template>
  <div class="sale">
    
    <el-row :gutter="10">
      <el-col :span="6" :offset="3">
        <el-button type="primary" plain @click="dialogAddMilk = true,getMilk()">点击签收牛奶</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogMilkOperate = true,getMilkIds()">添加牛奶操作</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogHistory = true,loading = false">查询溯源信息</el-button>
      </el-col>
    </el-row>
    

    <el-dialog
            title="签收牛奶"
            :visible.sync="dialogAddMilk"
            width="50%">

      <el-form
              status-icon
              :model="confirmMilk"
              ref="ruleForm2"
              class="demo-ruleForm">

        <el-form-item label="牛奶编号">
          <el-select v-model="confirmMilk.milkId" placeholder="请选择牛奶编号">
            <el-option
                    v-for="(item) in milks"
                    :key="item.id"
                    :label="item.id"
                    :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否签收">
          <el-radio-group v-model="confirmMilk.isConfirm">
            <el-radio label="1">签收</el-radio>
            <el-radio label="2">拒签</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddMilk = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addMilk()">确 定</el-button>
      </span>

    </el-dialog>


    <el-dialog
            title="添加牛奶操作"
            :visible.sync="dialogMilkOperate"
            width="50%">

      <el-form
              status-icon
              :model="milkOperate"
              ref="ruleForm2"
              class="demo-ruleForm">


        <el-form-item label="奶桶编号">
          <el-select v-model="milkOperate.milkId" placeholder="请选择奶桶编号">
            <el-option
                    v-for="(item) in milkIds"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作种类">
          <el-radio-group v-model="milkOperate.operation">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">售出</el-radio>
            <el-radio :label="3">下架</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMilkOperate = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="loading = true,addMilkOperate()">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
            title="溯源信息"
            :visible.sync="dialogHistory"
            width="50%">

      <el-form
              status-icon
              ref="ruleForm2"
              class="demo-ruleForm">

        <el-form-item label="奶桶编号">
          <el-input v-model="historyId" placeholder="请输入查询的牛奶编号"></el-input>
        </el-form-item>

      </el-form>



      <div class="block">
        <el-timeline>
          <el-timeline-item v-if="history.cowInfo.farmId != null" placement="top">
            <el-card>
              <h4>所属奶牛场：{{history.cowInfo.farmId}}</h4>
              <h4>编号：{{history.cowInfo.id}}</h4>
              <p>食物来源：{{history.cowInfo.feedSource}}</p>
              <p v-if="history.cowInfo.healthy === true">健康状态：健康</p>
              <p v-if="history.cowInfo.healthy === false">健康状态：非健康</p>
              <p v-if="history.cowInfo.quarantine === true">检疫情况：已检疫</p>
              <p v-if="history.cowInfo.quarantine === false">检疫情况：未检疫</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(activity, index) in history.dairHistory" :key="index" :timestamp="activity.time" placement="top">
            <el-card>
              <h4>奶牛ID：{{activity.cowId}}</h4>
              <p v-if="activity.operation === 1">操作：挤奶</p>
              <p v-if="activity.operation === 2">操作：喂食</p>
              <p v-if="activity.operation === 3">操作：检疫</p>
              <p>{{activity.consumptionOrOutput}}</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item v-if="history.bucketInfo.time != null" :timestamp="history.bucketInfo.time" placement="top">
            <el-card>
              <h4>所属加工厂：{{history.bucketInfo.farmId}}</h4>
              <h4>编号：{{history.bucketInfo.id}}</h4>
              <p>进入加工厂时间：{{history.bucketInfo.inMachiningTime}}</p>
              <p>生产时间：{{history.bucketInfo.time}}</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(activity, index) in history.machHistory" :key="index" :timestamp="activity.time" placement="top">
            <el-card>
              <h4>奶桶ID：{{activity.bucketId}}</h4>
              <p v-if="activity.operation === 1">操作：消毒</p>
              <p v-if="activity.operation === 2">操作：灌装</p>
              <p>{{activity.consumptionOrOutput}}</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item v-if="history.milkInfo.time != null" :timestamp="history.milkInfo.time" placement="top">
            <el-card>
              <h4>所属销售点ID：{{history.milkInfo.farmId}}</h4>
              <h4>编号：{{history.milkInfo.id}}</h4>
              <p>进入销售点时间：{{history.milkInfo.inSaleTime}}</p>
              <p>生产时间：{{history.milkInfo.time}}</p>
              <p>售出时间：{{history.milkInfo.saledTime}}</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(activity, index) in history.saleHistory" :key="index" :timestamp="activity.Time" placement="top">
            <el-card>
              <h4>牛奶ID：{{activity.milkId}}</h4>
              <p v-if="activity.operation === 1">操作：上架</p>
              <p v-if="activity.operation === 2">操作：售出</p>
              <p v-if="activity.operation === 3">操作：下架</p>
              <p>{{activity.consumptionOrOutput}}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHistory = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addHistory()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as saleAPI from '@/api/sale/';

export default {
  name: "Sale",
  data() {
    return {
      dialogAddMilk: false,
      dialogMilkOperate: false,
      dialogHistory: false,
      loading: false,
      confirmMilk: {
        milkId: '',
        saleId: 'S001',
        isConfirm: '',
      },
      milks: [],
      milkIds: [],
      milkOperate: {
        milkId: '',
        operation: '',
        consumptionOrOutput: '',
      },
      sentProcess: {
        milkId: '',
        saleId: '',
      },
      historyId: '',
      history: {
        milkInfo: {},
        bucketInfo: {},
        cowInfo: {},
        saleHistory: [],
        machHistory: [],
        dairHistory: [],
      },
    };
  },
  methods: {
    getMilk() {
      saleAPI.getMilk("S001").then((res) => {
        this.milks = res.data
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddMilk = false
      })
    },
    addMilk() {
      this.loading = true
      saleAPI.postConfirmMilk(this.confirmMilk).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '接收失败',
            message: res.msg,
          })
          this.dialogAddMilk = false
        } else {
          this.$notify({
            title: '接收成功',
            message: res.data.id,
            type: 'success'
          })
          this.dialogAddMilk = false
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddMilk = false
      })
    },
    getMilkIds() {
      saleAPI.get("S001").then((res) => {
        this.milkIds = res.S001.milkIds
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogMilkOperate = false
      })
    },
    addMilkOperate() {
      this.loading = true
      saleAPI.postMilkOperate(this.milkOperate).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '操作失败',
            message: res.msg,
          })
          this.dialogMilkOperate = false
        } else {
          this.$notify({
            title: '操作成功',
            message: res.data,
            type: 'success'
          })
          this.dialogMilkOperate = false
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogMilkOperate = false
      })
    },
    addHistory() {
      this.loading = true
      saleAPI.getMilkHistory(this.historyId).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '操作失败',
            message: res.msg,
          })
          this.dialogHistory = false
        } else {
          this.history = res.data
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddMilk = false
      })
    },
  },
  components: {
  },
};
</script>

<style scoped>

  .sale {
    margin-top: 20%;
  }

  /deep/ .el-button {
    font-size: 30px;
  }
</style>
